enyo.kind({
    name: "MyApps.ProductDetail",
    kind: enyo.VFlexBox,
    events: {
        onBack: "",
    },
    
    components: [{
        name: "pane",
        kind: "Pane",
        flex: 1,
        components: [{
        
            kind: "VFlexBox",
            flex: 1,
            components: [{
                kind: "PageHeader",
                className: "enyo-header-dark",
                components: [{
                    kind: "IconButton",
                    onclick: "doBack",
                    icon: "images/menu-icon-back.png",
                    className: "enyo-button-dark"
                }, {
                    name: "view",
                    kind: "VFlexBox",
                    flex: 1,
                    align: "center",
                    components: [{
                        name: "titleViewDetails",
                        content: ""
                    }, ]
                }, {
                    kind: "IconButton",
                    onclick: "showOnWeb",
                    icon: "images/web.png",
                    className: "enyo-button-dark",
                
                }, ]
            }, {
                kind: "Scroller",
                flex: 1,
                className: "productdetail",
                components: [{
                
                    kind: "VFlexBox",
                    flex: 1,
                    components: [{
                        kind: "HFlexBox",
                        components: [{
                            name: "photo",
                            kind: "Image",
                        
                        }, {
                            kind: "VFlexBox",
                            flex: 1,
                            components: [{
                                name: "name",
                                className: "productname",
                            }, {
                                name: "resume",
                                className: "productresume",
                            }, {
                                name: "price",
                                className: "productprice",
                            }, ]
                        }, ]
                    }, {
                        name: "description",
                        className: "productdescription",
                    }]
                }, ]
            }, ]
        }, {
        
            name: "productDetailWeb",
            kind: "MyApps.WebWithHeader",
            onBack: "goBack",
            lazy: true,
        
        }]
    }, ],
    
    create: function(){
        this.inherited(arguments);
        this.product;
        
    },
    
    setData: function(product){
        this.product = product;
        this.$.photo.setSrc(product.url_image_petite)
        this.$.name.setContent(product.libelle.replace(/\\\"/g, "\""));
        this.$.resume.setContent(product.resume.replace(/&euro/g, "€"));
        this.$.price.setContent(product.prix_standard + " €");
        product.descriptif = product.descriptif.replace(/&bull/g, "•");
        product.descriptif = product.descriptif.replace(/&trade/g, "™");
        product.descriptif = product.descriptif.replace(/&rsquo/g, "’");
        this.$.description.setContent(product.descriptif);
    },
    
    showOnWeb: function(){
    
        this.$.pane.selectViewByName("productDetailWeb");
        this.$.productDetailWeb.setUrl(this.product.url);
        
    },
    goBack: function(inSender, inEvent){
        this.$.pane.back(inEvent);
    }
})
